<template>
  <div>
    <br>
    <br>
    <span>全肢简1</span>
    <el-card class="box-card">
      <el-table
        :data="pgForm"
        border
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{background:'#edf6fa'}">
        <el-table-column
          prop="limb"
          label="上/下肢"
          align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.limb" placeholder="请选择">
              <el-option
                v-for="item in options_limb"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="left_right"
          label="左/右"
          align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.left_right" placeholder="请选择">
              <el-option
                v-for="item in options_lr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="part"
          label="部位"
          align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.part" placeholder="请选择">
              <el-option
                v-if="scope.row.left_right != ''"
                v-for="item in scope.row.left_right == 'l' ? options_part_left : options_part_right"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="等级"
          align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.level" placeholder="请选择">
              <el-option
                v-for="item in options_level"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          label="删除"
          align="center">
          <template slot-scope="scope">
            <div style="margin: 10px 0 0 0;text-align: center">
              <el-button type="danger" size="small" icon="el-icon-minus" circle @click="delColumn(scope.row)"></el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div style="margin: 10px 0 0 0;text-align: center">
        <el-button type="primary" size="small" icon="el-icon-plus" circle @click="addColumn"></el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
export default {
  name: "strength_all_brief1_new",
  title: "肌力评定（全肢简1新）",
  created() {
    if (this.istrans) {
      this.pgForm = this.fromdata
    }
  },
  props: {
    fromdata: {},
    istrans: false,
  },
  data() {
    return {
      pgForm: [{
        limb: '',
        left_right: '',
        part: '',
        level: ''
      }],
      options_limb: [{
        value: '选项1',
        label: '上肢'
      }, {
        value: '选项2',
        label: '下肢'
      }],
      options_lr: [{
        value: 'l',
        label: '左'
      }, {
        value: 'r',
        label: '右'
      }],
      options_part_left: [{
        value: '选项1',
        label: '肩胛提肌'
      }, {
        value: '选项2',
        label: '冈上肌'
      }, {
        value: '选项3',
        label: '三角肌'
      }, {
        value: '选项4',
        label: '肱二头肌'
      }, {
        value: '选项5',
        label: '肱三头肌'
      }],
      options_part_right: [{
        value: '选项1',
        label: '股四头肌'
      }, {
        value: '选项2',
        label: '腘绳肌'
      }, {
        value: '选项3',
        label: '胫前肌'
      }, {
        value: '选项4',
        label: '小腿三头肌'
      }],
      options_level: [{
        value: '选项1',
        label: '0'
      }, {
        value: '选项2',
        label: '1-'
      }, {
        value: '选项3',
        label: '1'
      }, {
        value: '选项4',
        label: '1+'
      }, {
        value: '选项5',
        label: '2-'
      }, {
        value: '选项6',
        label: '2'
      }, {
        value: '选项7',
        label: '2+'
      }, {
        value: '选项8',
        label: '3-'
      }, {
        value: '选项9',
        label: '3'
      }, {
        value: '选项10',
        label: '3+'
      }, {
        value: '选项11',
        label: '4-'
      }, {
        value: '选项12',
        label: '4'
      }, {
        value: '选项13',
        label: '4+'
      }, {
        value: '选项14',
        label: '5'
      }],
    };
  },
  methods: {

    // //合并方法
    // objectSpanMethod({row, column, rowIndex, columnIndex}) {
    //   if (columnIndex == 0) {
    //     //合并相同的名字
    //     let nameSpan = this.getSpanNumber(this.pgForm, "limb");
    //     return {
    //       rowspan: nameSpan[rowIndex],
    //       colspan: 1,
    //     };
    //   }
    // },
    // //获取要合并的行数
    // getSpanNumber(data, prop) {
    //   //data要处理的数组，prop要合并的属性，比如name
    //
    //   //数组的长度，有时候后台可能返回个null而不是[]
    //   let length = Array.isArray(data) ? data.length : 0;
    //   if (length > 0) {
    //     //用于标识位置
    //     let position = 0;
    //     //用于对比的数据
    //     let temp = data[0][prop];
    //     //要返回的结果
    //     let result = [1];
    //     //假设数据是AABCC，我们的目标就是返回20120
    //     for (let i = 1; i < length; i++) {
    //       if (data[i][prop] == temp) {
    //         //标识位置的数据加一
    //         result[position] += 1;
    //         //当前位置添0
    //         result[i] = 0;
    //       } else {
    //         //不相同时，修改标识位置，该位置设为1，修改对比值
    //         position = i;
    //         result[i] = 1;
    //         temp = data[i][prop];
    //       }
    //     }
    //     //返回结果
    //     return result;
    //   } else {
    //     return [0];
    //   }
    // },
    // cellStyle({columnIndex}) {
    //   if (columnIndex == 0) {
    //     return 'background-color:#edf6fa'
    //   } else {
    //     return ''
    //   }
    // },
    //添加行
    addColumn() {
      let newList = {
        limb: '',
        left_right: '',
        part: '',
        level: ''
      }
      this.pgForm.push(newList);
    },
    //删除行
    delColumn(row) {
      const colId = row.id;
      this.pgForm.splice(colId,1)
    },
    del() {
      this.$emit('del', '');
    }
  }
}
</script>

<style scoped>
span{
  position: relative;
  top: -15px;
}
</style>
